<script lang="ts">
import { defineComponent, ref, watch } from "vue"
import { getAssetsFile } from "@/utils/pub-use"
import { UserModule } from "@/store/modules/user";
import { lpMineModule } from "@/store/modules/lpMine";
import { toWei, fromWei, formatAddress } from "@/utils/format";

export default defineComponent({
    setup() {
        const partnerList = ref([
            {
                name: "Telegram",
                image: getAssetsFile("Partner1.png")
            },
            {
                name: "YouTube",
                image: getAssetsFile("Partner2.png")
            }, {
                name: "Twitter",
                image: getAssetsFile("Partner3.png")
            }, {
                name: "TikTok",
                image: getAssetsFile("Partner4.png")
            }
        ])
        const contactUsList = ref([
            {
                name: "Telegram",
                image: getAssetsFile("Telegram@2x.png")
            },
            {
                name: "YouTube",
                image: getAssetsFile("YouTube@2x.png")
            }, {
                name: "Twitter",
                image: getAssetsFile("Twitter@2x.png")
            }, {
                name: "TikTok",
                image: getAssetsFile("TikTok@2x.png")
            }, {
                name: "Facebook",
                image: getAssetsFile("Facebook@2x.png")
            },
            {
                name: "Instagram",
                image: getAssetsFile("Instagram@2x.png")
            }
        ])
        const getPrice = ref(0)
        const contractInfo = ref({})
        const loadData = async () => {
            lpMineModule.getPrice().then(res => {
                getPrice.value = res
            })
            await lpMineModule.contractInfo().then(res => {
                contractInfo.value = res
            })
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            partnerList,
            contactUsList,
            contractInfo,
            getPrice,
            fromWei
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="banner">
            <div class="info">
                <div class="name">
                    {{ $t('layout.FreemanDAO') }}<br>
                    {{ $t('layout.rightsbelongtothepeople') }}
                </div>
                <div class="label">{{ $t('layout.Thepathtofreedomforall') }}</div>
                <router-link to="/pledge" class="button">{{ $t('layout.Thepathtoadvancement') }}</router-link>
            </div>
        </div>
        <div class="total">
            <div class="row">
                <div class="border">
                    <div class="cell">
                        <div class="label">{{ $t('layout.Participatingaddressesacrosstheentirenetwork') }}</div>
                        <div class="value">{{ (Number(contractInfo[0]) - 1) || 0 }}</div>
                    </div>
                </div>
                <div class="border">
                    <div class="cell">
                        <div class="label">{{ $t('layout.Cumulativepledgeoftheentirenetwork') }}</div>
                        <div class="value">{{ fromWei(contractInfo[1]) || 0 }}</div>
                    </div>
                </div>
            </div>
            <div class="border">
                <div class="price">
                    <div class="info">
                        <div class="label"><img src="@/assets/image/image2.png" alt="" srcset="">{{
                            $t('layout.Currentprice') }}</div>
                        <div class="value">{{ fromWei(getPrice) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nft-box">
            <div class="nft"><img src="@/assets/image/image3.png" alt="" srcset=""></div>
            <div class="foot">
                <div class="label">{{ $t('layout.NFTdisplay') }}</div>
            </div>
        </div>
        <div class="Partner">
            <div class="title">{{ $t('layout.Partner') }}</div>
            <ul>
                <li v-for="(item, index) in partnerList" :key="index">
                    <img :src="item.image" alt="">
                </li>
            </ul>
        </div>
        <div class="Partner2">
            <div class="title">{{ $t('layout.contactus') }}</div>
            <ul>
                <li v-for="(item, index) in contactUsList" :key="index">
                    <img :src="item.image" alt="">
                    <div class="name">{{ item.name }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .border {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;

    }

    .banner {
        position: relative;
        height: 170px;
        background: url("@/assets/image/image1.png") center/cover no-repeat;

        .info {
            position: absolute;
            right: 37px;
            top: 30px;

            .name {
                padding-bottom: 5px;
                font-size: 15px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 20px;
                text-shadow: 0px 0px 3px #060629;
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            }

            .label {
                margin-top: 8px;
                font-size: 10px;
                font-weight: 500;
                color: #FBB600;
                line-height: 10px;
            }

            .button {
                display: inline-block;
                margin-top: 20px;
                padding: 7px 13px;
                font-size: 12px;
                font-weight: 500;
                color: #02032D;
                background: linear-gradient(90deg, #F3B085 0%, #FBF4F1 100%);
                border-radius: 4px;
            }
        }
    }

    .total {
        margin-top: 12px;

        .row {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;

            .cell {
                width: 167px;
                height: 97px;
                text-align: center;
                background: linear-gradient(90deg, #01012B 0%, #32437B 100%);
                border-radius: 8px;

                .label {
                    padding-top: 25px;
                    color: #FFDBC4;
                }

                .value {
                    margin-top: 10px;
                    font-size: 25px;
                    font-weight: bold;
                }
            }
        }

        .price {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 97px;
            background: linear-gradient(90deg, #01012B 0%, #32437B 100%);
            border-radius: 8px;

            .label {
                display: flex;
                align-items: center;
                color: #FFDBC4;

                img {
                    margin-right: 8px;
                    width: 15px;
                    height: 15px;
                }
            }

            .value {
                margin-top: 12px;
                font-size: 25px;
                font-weight: bold;
                text-align: center;
            }
        }
    }

    .nft-box {
        margin-top: 30px;

        .nft {
            display: flex;
            justify-content: center;

            img {
                width: 218px;
                height: 242px;
            }
        }

        .foot {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            margin-top: 5px;
            margin: 0 auto;
            text-align: center;
            width: 317px;
            height: 92px;
            background: url("@/assets/image/image4.png") center/cover no-repeat;

            .label {
                display: inline-block;
                padding: 7px 13px;
                font-size: 12px;
                font-weight: 500;
                color: #02032D;
                background: linear-gradient(90deg, #F3B085 0%, #FBF4F1 100%);
                border-radius: 4px;
            }

        }
    }

    .Partner {
        margin-top: 30px;

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
        }

        ul {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                margin-top: 12px;
                width: 167px;
                height: 58px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);

                img {
                    height: 20px;
                }
            }
        }
    }

    .Partner2 {
        margin-top: 30px;

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
        }

        ul {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                margin-top: 12px;
                width: 107px;
                height: 107px;
                text-align: center;
                border-radius: 6px;
                border: 1px solid rgba(255, 255, 255, 0.1);

                img {
                    margin-top: 23px;
                    width: 40px;
                    height: 38px;
                }

                .name {
                    margin-top: 12px;
                    font-weight: 500;
                }
            }
        }
    }
}
</style>
